<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-AFC音频分辨测试</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
        }

        .container {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }

        .section {
            margin-bottom: 30px;
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        .upload-section {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .file-input-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .file-input {
            flex: 1;
            padding: 10px;
            border: 2px dashed #3498db;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .file-input:hover {
            background-color: #eef7ff;
        }

        .file-input input {
            display: none;
        }

        .file-name {
            font-style: italic;
            color: #7f8c8d;
        }

        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }

        .test-section {
            display: none;
        }

        .test-info {
            text-align: center;
            margin-bottom: 20px;
            font-size: 18px;
        }

        .options-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .option {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border-radius: 8px;
            background-color: white;
            border: 1px solid #e0e0e0;
            transition: all 0.3s;
        }

        .option:hover {
            background-color: #f0f8ff;
            border-color: #3498db;
        }

        .option audio {
            flex: 1;
        }

        .option button {
            min-width: 100px;
        }

        .results-section {
            display: none;
        }

        .results-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .results-table th, .results-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .results-table th {
            background-color: #f2f2f2;
        }

        .correct {
            color: #27ae60;
            font-weight: bold;
        }

        .incorrect {
            color: #e74c3c;
            font-weight: bold;
        }

        .summary {
            padding: 15px;
            border-radius: 8px;
            background-color: #eef7ff;
            text-align: center;
        }

        .summary h3 {
            margin-top: 0;
            color: #2c3e50;
        }

        .summary p {
            font-size: 18px;
            margin: 10px 0;
        }

        .success {
            color: #27ae60;
        }

        .failure {
            color: #e74c3c;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            margin: 15px 0;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: #3498db;
            width: 0%;
            transition: width 0.3s;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>3-AFC音频分辨测试</h1>

        <!-- 上传区域 -->
        <div class="section upload-section">
            <h2>上传音频文件</h2>
            <div class="file-input-container">
                <div class="file-input" onclick="document.getElementById('fileA').click()">
                    <input type="file" id="fileA" accept="audio/*" onchange="handleFileUpload('A', this)">
                    <span id="fileA-label">点击上传音频 A</span>
                </div>
                <div class="file-name" id="fileA-name">未选择文件</div>
            </div>

            <div class="file-input-container">
                <div class="file-input" onclick="document.getElementById('fileB').click()">
                    <input type="file" id="fileB" accept="audio/*" onchange="handleFileUpload('B', this)">
                    <span id="fileB-label">点击上传音频 B</span>
                </div>
                <div class="file-name" id="fileB-name">未选择文件</div>
            </div>

            <button id="startTestBtn" disabled onclick="startTest()">开始测试</button>
        </div>

        <!-- 测试区域 -->
        <div class="section test-section" id="testSection">
            <div class="test-info">
                <h2>测试进度: <span id="currentTest">1</span> / 10</h2>
                <div class="progress-bar">
                    <div class="progress" id="progressBar"></div>
                </div>
                <p>请仔细聆听每个选项，然后选择您认为不同的音频</p>
            </div>

            <div class="options-container" id="optionsContainer">
                <!-- 选项将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 结果区域 -->
        <div class="section results-section" id="resultsSection">
            <h2>测试结果</h2>

            <table class="results-table">
                <thead>
                    <tr>
                        <th>测试编号</th>
                        <th>正确选项</th>
                        <th>您的选择</th>
                        <th>结果</th>
                    </tr>
                </thead>
                <tbody id="resultsTableBody">
                    <!-- 结果将通过JavaScript动态生成 -->
                </tbody>
            </table>

            <div class="summary" id="summary">
                <!-- 总结将通过JavaScript动态生成 -->
            </div>

            <button onclick="resetTest()">重新测试</button>
        </div>
    </div>

    <script>
        // 全局变量
        let audioA = null;
        let audioB = null;
        let currentTestIndex = 0;
        let testResults = [];
        let currentTestConfig = null;

        // 处理文件上传
        function handleFileUpload(type, input) {
            const file = input.files[0];
            if (!file) return;

            const fileUrl = URL.createObjectURL(file);

            if (type === 'A') {
                audioA = fileUrl;
                document.getElementById('fileA-name').textContent = file.name;
                document.getElementById('fileA-label').textContent = '已上传音频 A';
            } else {
                audioB = fileUrl;
                document.getElementById('fileB-name').textContent = file.name;
                document.getElementById('fileB-label').textContent = '已上传音频 B';
            }

            // 检查是否两个文件都已上传
            if (audioA && audioB) {
                document.getElementById('startTestBtn').disabled = false;
            }
        }

        // 开始测试
        function startTest() {
            // 重置测试状态
            currentTestIndex = 0;
            testResults = [];

            // 隐藏上传区域，显示测试区域
            document.querySelector('.upload-section').style.display = 'none';
            document.getElementById('testSection').style.display = 'block';

            // 开始第一次测试
            runNextTest();
        }

        // 运行下一次测试
        function runNextTest() {
            if (currentTestIndex >= 10) {
                // 所有测试完成，显示结果
                showResults();
                return;
            }

            // 更新测试进度
            document.getElementById('currentTest').textContent = currentTestIndex + 1;
            const progress = ((currentTestIndex + 1) / 10) * 100;
            document.getElementById('progressBar').style.width = `${progress}%`;

            // 生成测试配置
            generateTestConfig();

            // 渲染测试选项
            renderTestOptions();
        }

        // 生成测试配置
        function generateTestConfig() {
            // 随机决定哪个音频是"不同"的
            const targetAudio = Math.random() < 0.5 ? 'A' : 'B';
            const otherAudio = targetAudio === 'A' ? 'B' : 'A';

            // 随机决定目标音频的位置 (0, 1, 或 2)
            const targetPosition = Math.floor(Math.random() * 3);

            // 创建配置对象
            currentTestConfig = {
                targetAudio,
                otherAudio,
                targetPosition,
                options: []
            };

            // 构建选项数组
            for (let i = 0; i < 3; i++) {
                if (i === targetPosition) {
                    currentTestConfig.options.push({
                        audio: targetAudio === 'A' ? audioA : audioB,
                        isTarget: true
                    });
                } else {
                    currentTestConfig.options.push({
                        audio: otherAudio === 'A' ? audioA : audioB,
                        isTarget: false
                    });
                }
            }
        }

        // 渲染测试选项
        function renderTestOptions() {
            const container = document.getElementById('optionsContainer');
            container.innerHTML = '';

            currentTestConfig.options.forEach((option, index) => {
                const optionDiv = document.createElement('div');
                optionDiv.className = 'option';

                const audio = document.createElement('audio');
                audio.controls = true;
                audio.src = option.audio;

                const button = document.createElement('button');
                button.textContent = `选择选项 ${index + 1}`;
                button.onclick = () => selectOption(index);

                optionDiv.appendChild(audio);
                optionDiv.appendChild(button);
                container.appendChild(optionDiv);
            });
        }

        // 选择选项
        function selectOption(selectedIndex) {
            // 禁用所有按钮，防止重复选择
            const buttons = document.querySelectorAll('.option button');
            buttons.forEach(btn => btn.disabled = true);

            // 记录测试结果
            const isCorrect = selectedIndex === currentTestConfig.targetPosition;
            testResults.push({
                testNumber: currentTestIndex + 1,
                correctOption: currentTestConfig.targetPosition + 1,
                selectedOption: selectedIndex + 1,
                isCorrect
            });

            // 延迟后进入下一次测试
            setTimeout(() => {
                currentTestIndex++;
                runNextTest();
            }, 1000);
        }

        // 显示结果
        function showResults() {
            // 隐藏测试区域，显示结果区域
            document.getElementById('testSection').style.display = 'none';
            document.getElementById('resultsSection').style.display = 'block';

            // 填充结果表格
            const tableBody = document.getElementById('resultsTableBody');
            tableBody.innerHTML = '';

            testResults.forEach(result => {
                const row = document.createElement('tr');

                const testNumberCell = document.createElement('td');
                testNumberCell.textContent = `测试 ${result.testNumber}`;

                const correctOptionCell = document.createElement('td');
                correctOptionCell.textContent = `选项 ${result.correctOption}`;

                const selectedOptionCell = document.createElement('td');
                selectedOptionCell.textContent = `选项 ${result.selectedOption}`;

                const resultCell = document.createElement('td');
                resultCell.textContent = result.isCorrect ? '正确' : '错误';
                resultCell.className = result.isCorrect ? 'correct' : 'incorrect';

                row.appendChild(testNumberCell);
                row.appendChild(correctOptionCell);
                row.appendChild(selectedOptionCell);
                row.appendChild(resultCell);

                tableBody.appendChild(row);
            });

            // 计算正确率
            const correctCount = testResults.filter(r => r.isCorrect).length;
            const accuracy = (correctCount / 10) * 100;

            // 生成总结
            const summaryDiv = document.getElementById('summary');
            summaryDiv.innerHTML = `
                <h3>测试总结</h3>
                <p>正确回答: <strong>${correctCount}</strong> / 10</p>
                <p>正确率: <strong>${accuracy.toFixed(1)}%</strong></p>
                <p class="${accuracy >= 70 ? 'success' : 'failure'}">
                    ${accuracy >= 70 ?
                        '恭喜！您能够分辨出音频之间的差异' :
                        '您未能显著分辨出音频之间的差异'}
                </p>
                <p>3-AFC测试标准: 随机猜测正确率为33.3%，正确率≥70%表明具有分辨能力</p>
            `;
        }

        // 重置测试
        function resetTest() {
            // 重置状态
            audioA = null;
            audioB = null;
            currentTestIndex = 0;
            testResults = [];

            // 重置UI
            document.getElementById('fileA').value = '';
            document.getElementById('fileB').value = '';
            document.getElementById('fileA-name').textContent = '未选择文件';
            document.getElementById('fileB-name').textContent = '未选择文件';
            document.getElementById('fileA-label').textContent = '点击上传音频 A';
            document.getElementById('fileB-label').textContent = '点击上传音频 B';
            document.getElementById('startTestBtn').disabled = true;

            // 显示上传区域，隐藏结果区域
            document.querySelector('.upload-section').style.display = 'block';
            document.getElementById('resultsSection').style.display = 'none';
        }
    </script>
</body>
</html>
